<template>
	<view v-if="list.length">

		<view class="main-head flex-no-horizontal">
			<view class="title">
				他的藏品
			</view>
			<view class="icon" @click="toPage">
				<u-icon name="arrow-right" color="#000" size="25"></u-icon>
			</view>
		</view>

		<view class="main-item-box flex-no-horizontal">

			<view class="main-item" v-for="(item,index) in listProcessing" :key="index">
				<u--image :src="item.cover" width="210rpx" height="294rpx" radius="10rpx" :lazy-load="true"></u--image>
				<view class="m-t-5">{{item.title}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		otherCollection
	} from '../../../api/collection.js'
	export default {
		props: {
			userId: Number,
		},
		data() {
			return {
				list: []
			};
		},
		computed: {
			listProcessing() {
				return this.list.filter((item, index) => {
					return index < 3
				})
			}
		},
		created() {
			this.getCollection(this.userId)
		},
		methods: {
			async getCollection(id) {
				try {
					const res = await otherCollection({
						mid: id
					})
					if (res.data && res.data.length) {
						const list = []
						res.data.forEach(item => {
							list.push({
								title: item.title,
								cover: item.coverLink
							})
						})
						this.list = list
					}
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			toPage() {
				uni.navigateTo({
					url: `../collection/otherCollection?id=${this.userId}`
				})

			}
		},
	};
</script>

<style lang="scss">
	.main-head {
		margin-bottom: 50rpx;
		justify-content: space-between;

		.title {
			font-size: $uni-font-size-xlg;
			color: $uni-color-black;
			font-weight: bold;
		}
	}

	.main-item-box {
		align-items: flex-start;
		.main-item {
			width: 210rpx;
			margin-right: 20rpx;

			image {
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}

			view {
				color: $uni-color-black;
				font-size: $uni-font-size-base;
				text-align: center;
			}
		}

	}
</style>
